<form id="roleForm" METHOD="POST" name="roleForm"
      ACTION="<?= $_SERVER['PHP_SELF']; ?>"  onsubmit="return UTSDK.VALIDATION.validate('roleForm')">
    <input type="hidden" name="formSource" value="cRole"/>
    <input type="hidden" name="action" value="create"/>
    <table>
        <tr>
            <td><label>Role: </label></td>
            <td>
                <select id="role" name="role" data-required="false" data-default="null"
                        data-validation="select" data-validationmessage="Role must be chosen">
                    <option value="null">Create New</option>
                </select>
            </td>
            <td><label id="roleError"></label></td>
        </tr>
        <tr>
            <td><label>Role Title: </label></td>
            <td><input id="roleTitle" type="text" name="roleTitle" placeholder="Role Title"
                       data-validation="text"/></td>
            <td><label id="roleTitleError"></label></td>
        </tr>
        <tr>
            <td><label>Role Description: </label></td>
            <td><textarea id="roleDescription" type="text" name="roleDescription" placeholder="Role Description"
                          data-validation="text" data-validationmessage="Must not be empty" data-maxlength="300"></textarea></td>
            <td><label id="roleDescriptionError"></label></td>
        </tr>
        <tr>
            <td><label>Start Time: </label></td>
            <td><input id="roleStartTime" type="text" name="roleStartTime" 
                       placeholder="HH:MM" onkeydown="UTSDK.VALIDATION.checkTimeKeys(event)"
                       data-validation="time"/></td>
            <td><label id="roleStartTimeError"></label></td>
        </tr>
        <tr>
            <td><label>End Time: </label></td>
            <td><input id="roleEndTime" type="text" name="roleEndTime" data-after="roleStartTime"
                       placeholder="HH:MM" onkeydown="UTSDK.VALIDATION.checkTimeKeys(event)"
                       data-validation="time"/></td>
            <td><label id="roleEndTimeError"></label></td>
        </tr>
        <tr>
            <td><label>Start Date: </label></td>
            <td><input id="roleStartDate" type="text" name="roleStartDate" 
                       placeholder="YYYY-MM-DD" onkeydown="UTSDK.VALIDATION.checkDateKeys(event)"
                       data-validation="date" data-required="false"/></td>
            <td><label id="roleStartDateError"></label></td>
        </tr>
        <tr>
            <td><label>End Date: </label></td>
            <td><input id="roleEndDate" type="text" name="roleEndDate" data-after="roleStartDate"
                       placeholder="YYYY-MM-DD" onkeydown="UTSDK.VALIDATION.checkDateKeys(event)"
                       data-validation="date" data-required="false"/></td>
            <td><label id="roleEndDateError"></label></td>
        </tr>
        <tr>
            <td><label>Pay Rate: $</label></td>
            <td><input id="payRate" type="text" name="payRate" placeholder="Pay Rate"
                       data-validation="decimal" data-required="false"/></td>
            <td><label id="payRateError"></label></td>
        </tr>
        <tr>
            <td><label>Positions: </label></td>
            <td><input id="positions" type="text" name="positions" placeholder="Number of positions for this role"
                       data-validation="integer" data-required="false" data-maxlength="2"/></td>
            <td><label id="positionsError"></label></td>
        </tr>
        <tr>
            <td><label>Required Skills: </label></td>
            <td><input id="skills" type="text" name="skills" placeholder="Skills"/></td>
            <td><label id="skillsError"></label></td>
        </tr>
        <tr>
            <td><label>Activity: </label></td>
            <td>
                <select id="roleActivity" name="roleActivity" data-default="null"
                        data-validation="select" data-validationmessage="No activities in database">
                    <option value="null">none</option>
                </select>
            </td>
            <td><label id="roleActivityError"></label></td>
        </tr>
        <tr>
            <td></td>
            <td><input class="submitBtn" type="submit" value="Submit" id="roleSubmit"/></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td><input class="submitBtn" style="display:none" type="button" value="Delete" id="roleDelete"/></td>
            <td></td>
        </tr>
    </table>
</form>
<script>
    var roleForm = (function() {
        window.addEventListener("load", function(evt) {
            var json = {activity: "all"};
            UTSDK.updateSelect(json, UTSDK.$("roleActivity"));
        });
    })();
</script>